<template>
	<jk-dialog
		v-model="showDialog"
		title="订单工序产量"
		width="1300px"
		append-to-body
		fullscreen
		:show-close-btn="false"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<div :style="{height: `${dialogTableHeight + 110}px`, overflowY: 'auto', overflowX: 'hidden'}" style="box-sizing: border-box;">
			<el-row :gutter="16">
				<el-col :span="14">
					<div>
						<div>
							<el-tag type="primary" effect="plain" class="margin-bottom-4">
								<span class="el-icon-tickets item-gap"></span>
								<span>订单信息</span>
							</el-tag>
							<el-form ref="ruleForm" label-width="74px">
								<jk-card>
									<el-row>
										<el-col :span="12">
											<el-form-item class="margin-bottom-10" label="订单">
												<span class="read-only-2">{{ ruleForm.code || '无' }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item class="margin-bottom-10" label="客户">
												<span class="read-only-2">{{ ruleForm.customerName || '无' }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="24">
											<el-form-item class="margin-bottom-10" label="品种">
												<span class="read-only-2">{{ ruleForm.productName || '无' }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item class="margin-bottom-10" label="客户">
												<span class="read-only-2">{{ ruleForm.customerName || '无' }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item class="margin-bottom-10" label="批号">
												<span class="read-only-2">{{ ruleForm.batchCode || '无' }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item class="margin-bottom-0" label="数量">
												<span class="read-only-2">{{ ruleForm.orderQty || '无' }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item class="margin-bottom-0" label="投料数量">
												<span class="read-only-2">{{ getTlTotalVal(ruleForm.productionPlanList) }}</span>
											</el-form-item>
										</el-col>
									</el-row>
								</jk-card>
							</el-form>
							<!--<el-button type="primary" :loading="tableLoading" icon="el-icon-refresh" size="small" circle @click="getData"></el-button>-->
						</div>
						<el-tag type="primary" effect="plain" class="margin-bottom-4 margin-top-20">
							<span class="el-icon-tickets item-gap"></span>
							<span>工序产量统计</span>
						</el-tag>
						<div>
							<el-row :gutter="0" style="width: 100%;height: 300px;margin-bottom: 14px;box-sizing: border-box;display: flex;">
								<el-col :span="24" style="height: 100%;">
									<div style="height: 100%;background: #f8f8f9;border-radius: 8px;padding: 10px;box-sizing: border-box;">
										<div>总产量(kg)</div>
										<totalYieldTrendChart :chart-data="ruleForm"></totalYieldTrendChart>
									</div>
								</el-col>
							</el-row>
							<div class="flex-center margin-bottom-10">
								<div class="flex-start-center">
									<div
										v-for="(item, index) in openStateList"
										:key="index"
									>
										<jk-state-bar :state="item.id" :state-list="openStateList" class="margin-right-10"></jk-state-bar>
									</div>
								</div>
							</div>
							<component
								:is="viewType"
								:form-data="ruleForm"
							></component>
						</div>
					</div>
				</el-col>
				<el-col :span="10">
					<div>
						<el-tag type="primary" effect="plain" class="margin-bottom-4">
							<span class="el-icon-tickets item-gap"></span>
							<span>每日产量分析(工序)</span>
						</el-tag>
						<el-row :gutter="0" style="background: #f8f8f9;padding: 12px 12px 0px 12px;box-sizing: border-box;border-radius: 6px;">
							<el-col
								v-for="(item, index) in chartData.processChartDayList"
								:key="index"
								:span="24"
								style="height: 200px;padding-bottom: 12px;box-sizing: border-box;"
							>
								<div style="width: 100%;height: 100%;background: #fff;padding: 12px 12px 0 12px;border-radius: 6px;">
									<daily-yield-chart
										:chart-data="item"
									></daily-yield-chart>
								</div>
							</el-col>
						</el-row>
						<div class="margin-top-20">
							<jk-table border :stripe="false" :data="chartData.processLineDayList" :height="dialogTableHeight - 20">
								<vxe-column title="日期" align="center" field="belongDate" :width="100"></vxe-column>
								<vxe-colgroup title="细纱" field="xs" align="center">
									<vxe-column title="实时产量(kg)" align="right" field="reportOutputKg" :min-width="100">
										<template slot-scope="scope">
											<machine-list-popover :process-item="scope.row.xs"></machine-list-popover>
										</template>
									</vxe-column>
									<vxe-column title="称重产量(kg)" align="right" field="weighNetWeight" :min-width="100">
										<template slot-scope="scope">
											<div class="">{{ scope.row.xs.weighNetWeight }}</div>
										</template>
									</vxe-column>
								</vxe-colgroup>
								<vxe-colgroup title="粗纱" field="cs" align="center">
									<vxe-column title="实时产量(kg)" align="right" field="processShiftQty" :min-width="100">
										<template slot-scope="scope">
											<machine-list-popover :process-item="scope.row.cs"></machine-list-popover>
										</template>
									</vxe-column>
									<vxe-column title="称重产量(kg)" align="right" field="processShiftQty" :min-width="100">
										<template slot-scope="scope">
											<div class="">{{ scope.row.cs.weighNetWeight }}</div>
										</template>
									</vxe-column>
								</vxe-colgroup>
								<vxe-column title="并条产量(kg)" align="right" field="processShiftQty" :min-width="100">
									<template slot-scope="scope">
										<machine-list-popover :process-item="scope.row.bt"></machine-list-popover>
									</template>
								</vxe-column>
								<vxe-column title="梳棉产量(kg)" align="right" field="processShiftQty" :min-width="100">
									<template slot-scope="scope">
										<machine-list-popover :process-item="scope.row.sm"></machine-list-popover>
									</template>
								</vxe-column>
							</jk-table>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        productionProductOrderWeighingRecordItemDayCountByOrderId,
        reportProductionOrderTrackingInfo
    } from '../../../api/production/productionMonitor';
    import jkProgress from '../../jk-components/jk-progress';
    import { openStateList } from '../../../utils/jk/status-option-list';
    import listView from './components/view-type/list-view';
    import cardView from './components/view-type/card-view';
    import timeLineView from './components/view-type/time-line-view';
    import { mathJsAdd } from '../../../utils/jk/jk-cals';
    import totalYieldTrendChart from './components/totalYieldTrendChart';
    import machineListPopover from './components/dailyYield/machine-list-popover';
    import dailyYieldChart from './components/dailyYieldChart';
    export default {
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [calHeight],
        components: {
            dailyYieldChart,
            machineListPopover,
            totalYieldTrendChart,
            timeLineView,
            cardView,
            listView,
            jkProgress
        },
        data() {
            return {
                viewType: 'listView',
                viewList: [
                    { name: '列表', comName: 'listView' },
                    { name: '卡片', comName: 'cardView' },
                    { name: '流程线', comName: 'timeLineView' }
                ],
                openStateList: openStateList,
                timer: {},
                tableLoading: false,
                showDialog: false,
                ruleForm: {},
                chartData: {}
            };
        },
        methods: {
            getTlTotalVal(data) {
                let val = 0;
                if (data && data.length) {
                    data.forEach(x => {
                        val = mathJsAdd(val, x.feedstockQty || 0);
                    });
                }
                return val;
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    this.clearTimer();
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getData() {
                this.tableLoading = true;
                return reportProductionOrderTrackingInfo({
                    orderId: this.dataItem.id
                }).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res ? JSON.parse(JSON.stringify(res.data.res)) : {};
                    }
                });
            },
            getDailyChartData() {
                if (this.dataItem.id) {
                    return productionProductOrderWeighingRecordItemDayCountByOrderId({
                        productOrderId: this.dataItem.id
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.chartData = res.data.res ? JSON.parse(JSON.stringify(res.data.res)) : {};
                            console.log('每日', this.chartData);
                            this.$nextTick(() => {
                                this.calDialogViewHeight();
                            });
                        }
                    });
                }
            },
            run() {
                this.clearTimer();
                this.getData();
                this.getDailyChartData();
                this.timer = setInterval(() => {
                    this.getData();
                    this.getDailyChartData();
                }, 1000 * 60);
            },
            clearTimer() {
                clearInterval(this.timer);
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.run();
                }
            },
            dataItem: {
                handler(newVal) {
                },
                deep: true
            }
        },
        destroyed() {
            this.clearTimer();
        }
    };
</script>
